<template>
  <div ref="chart" class="charts chart-pie"></div>
</template>
<script>
export default {
  name: 'sciecle',
  props: {
    handlingData: {
      type: Number
    },
    textFlag: {
      type: Boolean,
      default: true
    },
    textColor: {
      type: String,
      default: '#292A2D'
    },
    textTop: {
      type: String,
      default: '23%'
    },
    color: {
      type: String,
      default: '#3CBDD0'
    },
    bgcolor: {
      type: String,
      default: '#BDEBFF'
    },
    maxNum: {
      type: Number,
      default: 100
    },
    radius: {
      type: Array,
      default: () => ['90%', '99%']
    }
  },
  watch: {
    handlingData(newValue) {
      this.handlingData = newValue
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getEchartData()
    })
  },
  methods: {
    getEchartData() {
      var getvalue = [this.handlingData]
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          title: {
            text: this.textFlag ? getvalue + '%' : getvalue,
            textStyle: {
              color: this.textColor,
              fontSize: this.textFlag ? 35 : 20
            },
            subtext: this.textFlag ? '解决率' : '',
            subtextStyle: {
              color: 'rgba(0, 0, 0, 0.45)',
              fontSize: 20
            },
            itemGap: 5,
            left: 'center',
            top: this.textTop
          },
          angleAxis: {
            max: this.maxNum,
            clockwise: true, // 逆时针
            // 隐藏刻度线
            show: false
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          polar: {
            center: ['50%', '50%'],
            radius: this.radius // 图形大小
          },
          series: [
            {
              type: 'bar',
              data: getvalue,
              showBackground: true,
              backgroundStyle: {
                color: this.bgcolor
              },
              coordinateSystem: 'polar',
              roundCap: true,
              barWidth: 45,
              itemStyle: {
                normal: {
                  opacity: 1,
                  color: this.color
                }
              }
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
    }
  }
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 280px;
}
</style>
